<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var xhr;
var menuInfo;
//XMLHttpRequest 객체 생성하여 xhr에 할당
function createXMLHttpRequest(){
	if(window.ActiveXObject){
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}else{
		xhr = new XMLHttpRequest();
	}
}
/////////////////////////////////대분류 이벤트 처리 - 중분류 조회 요청//////////////////////////////////
//Controller에 client가 선택한 대분류 아이디를 넘긴다.
function getMenu(){
	var fsel = document.getElementById("category");
	//첫번 option(대분류) 가 선택되면 중분류와 소분류, 테이블을 삭제한다.
	if(fsel.selectedIndex==0){
		removeMenu();
		removeMenuInfo();
		return;
	}
	createXMLHttpRequest();
	//선택된 대분류의 value값을 조회
	
	var fc = fsel.options[fsel.selectedIndex].value;
	var url = "getMenu.do?categoryId="+fc;
	//처리를 요청
	xhr.onreadystatechange = getMenuName;
	xhr.open("GET", url, true);
	xhr.send(null);

}
//중분류 응답 데이터 처리
//controller가 보낸 Data를 가지고 중분류 select를 만든다.
function getMenuName(){
	
	if(xhr.readyState==4){
		if(xhr.status==200){
			var txt = xhr.responseText;
			var jsonData = eval("("+txt+")");
			menuInfo = jsonData;
//			alert(jsonData.menu);
			//중분류 select 객체
			var sel = document.getElementById("menu");
			//select의 option 모두 삭제 후 추가해야 한다. (개수가 분류마다 다르므로)
			//삭제
			while(sel.hasChildNodes()){
				sel.removeChild(sel.firstChild);
			}
			//추가
			sel[0] = new Option("도시락선택", "default");
			for(var i = 0; i < jsonData.menu.length;i++){
				sel[i+1] = new Option(jsonData.menu[i].menuName, jsonData.menu[i].menuId);
//				alert(sel[i]);
			}
			//기존에 조회된 소분류와 테이블이 있으면 삭제 되어야 한다.
			removeMenu();
			removeTable();
		}else{
			alert("메뉴 요청처리 실패 : "+xhr.status+" - "+xhr.statusText);
		}
	}
}

/////////////////////////////////메뉴 이벤트 처리 - 중분류 조회 요청//////////////////////////////////
function getMenuInfo(){
	var tsel = document.getElementById("menu");
	//첫번 option(소분류) 가 선택되면 테이블을 삭제한다.
	if(tsel.selectedIndex==0){
		removeTable();
		return;
	}
	createXMLHttpRequest();
	
	var value = tsel.options[tsel.selectedIndex].value;
	var url = "getMenuInfo.do?menuId="+value;
	xhr.onreadystatechange=getMenuInfoCallback;
	xhr.open("GET",url, true);
	xhr.send(null);
}

//controller가 보낸 Data를 가지고 상품 리스트 Table을 만든다.
function getMenuInfoCallback(){
	if(xhr.readyState==4){
		if(xhr.status==200){
			var txt = xhr.responseText;
			var jsonData = eval("("+txt+")");
			alert(jsonData.menuInfo.menuName);

			removeTable();

			//tbody에 jsonData를 이용해 tr 생성 후 붙이기
			var tbody = document.getElementById("tbody");
			var tr1 = document.createElement("tr");
			var tr2 = document.createElement("tr");
			var tr3 = document.createElement("tr");
			var tr4 = document.createElement("tr");
			var td1 = document.createElement("td");
			var td2 = document.createElement("td");
			var td3 = document.createElement("td");
			var td4 = document.createElement("td");
			var img = document.createElement("img");
/*			<tr> 
			<td align="center" id="td1"><img src='/hansot/${mto.imgLocation }' border="0" width="110" height="110"></td>
		</tr>

		<tr>
			<td align="center" id="td2"  height="60" style="padding-top:6;padding-bottom:6;word-break:break-all" class="dod8_"><b><font color=#808080 size="3pt">${mto.menuName }</font></b></td>
		</tr>
		<tr>
			<td align="center" id="td3" height="45"><div  class="explanation"><font color=#808080>${mto.explanation }</font></div>&nbsp;</td>
		</tr>
		<tr>
			<td align="center" id="td4" height=25 class="dod8_"><font color=fe6700>${mto.menuPrice }원</font></td>
		</tr>
*/		
			url = "/hansot/"+jsonData.menuInfo.imgLocation;
			img.setAttribute("src",url);
			img.setAttribute("border",0);
			img.setAttribute("width",220);
			img.setAttribute("height",220);
			td1.appendChild(img);
			tr1.appendChild(td1);
			td2.innerHTML = jsonData.menuInfo.menuName;
			tr2.appendChild(td2);
			td3.innerHTML = jsonData.menuInfo.explanation;
			tr3.appendChild(td3);
			td4.innerHTML = jsonData.menuInfo.menuPrice+"원";
			tr4.appendChild(td4);

			tbody.appendChild(tr1);
			tbody.appendChild(tr2);
			tbody.appendChild(tr3);
			tbody.appendChild(tr4);
			
			var orderForm = document.getElementById("orderForm");
			var input1 = document.createElement("input");
			input1.setAttribute("type","hidden");
			input1.setAttribute("name","menuId");
			input1.setAttribute("value",jsonData.menuInfo.menuId);
		}
	}
}


function removeMenu(){
	var sel = document.getElementById("menuName");
	while(sel.hasChildNodes()){
		sel.removeChild(sel.firstChild);
	}
	sel[0] = new Option("도시락선택", "DEFAULT");
}
function removeTable(){
	var tbody = document.getElementById("tbody");
	while(tbody.hasChildNodes()){
		tbody.removeChild(tbody.firstChild);
	}
}
function upMenu(){
	var menuNum = document.getElementById("menuNum");
	menuNum.value = parseInt(menuNum.value) + 1;
}
function downMenu(){
	var menuNum = document.getElementById("menuNum");
	menuNum.value = parseInt(menuNum.value) - 1;
}
</script>
<style type="text/css">
.div{
	width:600px;
	border-bottom:1px;
	border-left:1px;
	border-right:1px;
	border-top:1px;
	border-style:solid;
	border-color:#CF3131;
	background-color: #FFD8D8;
	font-family:verdana;
	font-size:11pt;
	font-weight:bold;
	color:#CF3131;
}
.btn{
	height:5;
	color:#CF3131;   
	font: bold 84% 'trebuchet ms',helvetica,sans-serif ;   
	background-color:#fed;   
	border:1px solid;   
	border-color: #CF3131; 
	cursor:pointer;
}
</style>
</head>
<body>
<center>
<div class="div">
<table width="600" height="800" border="1" style="border-style:solid;">
<tr height="25">
<td colspan="2" align="center"><h2>주문페이지</h2></td>
</tr>
<tr height="20">
<td width="100">카테고리 : </td>
	<td>
		<select name="category" id="category" onChange="getMenu()">
			<option value="default">한솥메뉴</option>
			<c:forEach items="${requestScope.info.category }" var="ca" begin="0" end="${requestScope.info.num }" step="1">
				<option value="${ca.categoryId }">${ca.categoryName }</option>
			</c:forEach>
		</select>
	</td>
</tr>
<tr height="20">
<td width="100">도시락 : </td>
	<td>
		<select name="menu" id="menu" onChange="getMenuInfo()">
			<option value="default">도시락선택</option>
		</select>
	</td>
</tr>
<tr height="650">
	<td colspan="2">
		<table align="center">
			<tbody  id="tbody" align="center"></tbody>
		</table>
	</td>
</tr>
</table>
<form action="/hansot/order.do" method="post" id="orderForm">
	<table height="75">
		<tr>
			<td rowspan="2"><input type="text" value="1" id="menuNum" name="menuNum"></td>
			<td><input type="button" id="upBtn" class="btn" value="▲" onclick="upMenu()"></td>
			<td rowspan="2"><input type="submit" value="주문" class="btn"></td>
		</tr>
		<tr>
			<td><input type="button" id="downBtn" class="btn" value="▼" onclick="downMenu()"></td>
		</tr>
	</table>
</form>
</div>
</center>
</body>
</html>